{% extends "_layouts/examples.html" %}
{% block title %}Pagination / Truncated{% endblock %}

{% block standalone_css %}patterns_pagination{% endblock %}

{% block content %}
<nav class="p-pagination" aria-label="Pagination">
  <ol class="p-pagination__items">
    <li class="p-pagination__item">
      <a class="p-pagination__link--previous" href="#previous" title="Previous page"><i class="p-icon--chevron-down">Previous page</i></a>
    </li>
    <li class="p-pagination__item">
      <a class="p-pagination__link" href="#1" aria-label="Page 1">1</a>
    </li>
    <li class="p-pagination__item p-pagination__item--truncation">
      &hellip;
    </li>
    <li class="p-pagination__item">
      <a class="p-pagination__link" href="#33" aria-label="Page 33">33</a>
    </li>
    <li class="p-pagination__item">
      <a class="p-pagination__link is-active" href="#34" aria-current="page" aria-label="Page 34">34</a>
    </li>
    <li class="p-pagination__item">
      <a class="p-pagination__link" href="#35" aria-label="Page 35">35</a>
    </li>
    <li class="p-pagination__item p-pagination__item--truncation">
      &hellip;
    </li>
    <li class="p-pagination__item">
      <a class="p-pagination__link" href="#7">100</a>
    </li>
    <li class="p-pagination__item">
      <a class="p-pagination__link--next" href="#next" title="Next page"><i class="p-icon--chevron-down">Next page</i></a>
    </li>
  </ol>
</nav>
{% endblock %}
